<template>
<div class="bk">
  <el-container>
    <el-dialog
      title=""
      v-model="showChooseDialog1"
      :close-on-click-modal="false"
      width="50%"
      :showClose="false"
    >
      <div style="font-size: 24px">您已拥有门户，点击查看您的个人门户</div>
      <el-button type="primary" @click="returnmydoor" style="margin-top: 20px"
        >我的门户</el-button
      >
    </el-dialog>
    <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img :src="logo" @click="returnlink" style="height: 70px" />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop" v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'">
        <span class="el-dropdown-link">
            <span
            class="span4"
            style="
              width: 100px;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: normal;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              float: right;
              font-weight:600;">
            {{ $store.getters.userName }}
          </span>
          <div class="span4" style="float: right;font-weight:600;">您好,</div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnperinfo"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided @click="returnout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        class="login"
        type="text"
        @click="login"
        style="font-size: 24px; color: #e9eef3;font-weight:600;"
        v-else
        >登录</el-button
      >
    </el-header>
    <el-main>
      <div style="display: flex; margin-top: 20px; height: 100%">
        <transition name="fade">
          <div v-if="show">
            <img class="photo" src="../assets/book.png" alt="" />

            <el-popover
              placement="top-start"
              title=""
              width="200"
              trigger="hover"
              content="学者可在ACA学术持续维护自己的学者主页，将其打造成自己的学术名片，通过分享主页增加自己在学术界的影响力。"
            >
              <template v-slot:reference>
                <el-button class="el-icon-s-promotion" type="text"
                  >提升学术影响力</el-button
                >
              </template>
            </el-popover>
            <el-popover
              placement="top-start"
              title=""
              width="200"
              trigger="hover"
              content="ACA学术会根据全网文章数据，自动帮学者聚合学术成果，生成自己的学者主页，学者只需要认证自己的主项即可以使用相关功能。"
            >
              <template v-slot:reference>
                <el-button class="el-icon-connection" type="text"
                  >自动聚合学术成果</el-button
                >
              </template>
            </el-popover>
            <el-popover
              placement="top-start"
              title=""
              width="200"
              trigger="hover"
              content="学者可在ACA学术持续维护自己的学者主页，将其打造成自己的学术名片，通过分享主页增加自己在学术界的影响力。"
            >
              <template v-slot:reference>
                <el-button class="el-icon-paperclip" type="text"
                  >获取海量学术资源</el-button
                >
              </template>
            </el-popover>
            <el-button class="open" type="primary" round @click="register"
              >开启我的学术主页</el-button
            >
          </div>
        </transition>
      </div>
    </el-main>
  </el-container>
</div>

</template>

<script>
import logo from "../assets/no_border.png"
export default {
  data: () => ({
    whetherin:"",
    logo,
    showChooseDialog1: false,
    showChooseDialog2: false,
    show: false,
    visible: false,
  }),
  methods: {
    returnlink() {
      this.$router.push("/");
    },
    returnmydoor() {
      if (this.$store.state.own_door == true||this.$store.state.own_door == "true") {
        if (this.$store.state.isCompany == true||this.$store.state.isCompany == "true") {
          this.$router.push("/mycompanydoor");
        } else this.$router.push("/mydoortrue");
      } else this.$router.push("/mydoorfalse");
    },
    returnperinfo() {
      this.$router.push("/personalcenterforsee");
    },
    login() {
      this.$router.push("/login");
    },
    returnout() {
      this.$router.push("/");
      this.$store.commit("updateown_door", false);
      this.$store.commit("updateUserName", "");
      this.$store.commit("updateUserID", "");
      this.$store.commit("updateUserEmail", "");
      this.$store.commit("updateCTA", "");
      this.$store.commit("updateMPID", "");
      this.$store.commit("updatePID", "");
      this.$store.commit("updateIsLogin", false);
    },
    register() {
      this.$router.push('/doorregister')
    },
    change() {
      this.show = !this.show
      if(this.$store.getters.userID==""){
        this.whetherin=false
      }
      else this.whetherin=true
    },
    charge(){
      if(this.$store.state.own_door)
        this.showChooseDialog2=true;
    }
  },
  mounted() {
    this.change()
  },
  created() {
    this.charge();
  },
}
</script>

<style scoped>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
  border-radius: 20px;
}
.el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.return {
  position: absolute;
  left: 230px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.return .el-button--text {
    border-color: transparent;
    color: var(--el-color-primary);
    background: 0 0;
    padding-left: 0;
    font-weight: 600;
}
.photo {
  height: 610px;
  margin-left: 50px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.siteIcon {
    position: absolute;
    left: 100px;
    top: -5px; 
    color: #e9eef3;
}
/* .el-button--text {
    border-color: transparent;
    color: var(--el-color-primary);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-weight: 600;
} */
.el-dropdown {
  position: absolute;
  left: 1200px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.el-icon-s-promotion {
  color: #1047b4;
  font-size: 30px;
  position: absolute;
  left: 800px;
  top: 200px;
  float: right;
  font-weight: 600;
}
.el-icon-connection {
  color: #1047b4;
  font-size: 30px;
  position: absolute;
  left: 900px;
  top: 320px;
  float: right;
  font-weight: 600;
}
.el-icon-paperclip {
  color: #1047b4;
  font-size: 30px;
  position: absolute;
  left: 1000px;
  top: 440px;
  float: right;
  font-weight: 600;
}
.open {
  font-size: 40px;
  position: absolute;
  left: 850px;
  top: 600px;
  float: right;
  font-family: "KaiTi";
}
.login {
  position: absolute;
  right: 120px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
/* .el-main{
  background:rgba(255,255,255,0.4);
} */

</style>
